<template>
	<view class="works_list">
		<view class="sort_type">
			<view class="sort_type_inner" v-for="(item,index) in navs" :key="index" @click="navItemClick(index)">
				<text>{{item.title}}</text>
			</view>
			<!-- <view>评价</view>
			<view>浏览量</view> -->
		</view>
		<work-list :works="works" @workItemClick="goWorkDetail"></work-list>
		<view class="isOver" v-if="flag">-----没有数据了-----</view>
	</view>
</template>

<script>
	import workList from '../../components/work-list/work-list.vue'
	export default {
		data() {
			return {
				flag:false,
				works:[],
				navs:[
					{
						title:"综合",
					},{
						title:"好评",
					},{
						title:"浏览量",
					}
				],
				pageindex:1,
			}
		},
		components:{
			"work-list":workList
		},
		methods: {
			//跳转作品详情页
			goWorkDetail(id){
				uni.navigateTo({
					url:"/pages/work-detail/work-detail?id="+id
				})
			},
			//获得作品列表集
			async getWorkList(callBack){
				const res = await this.$myRequest({
					url: "/works/getAllWorksList?pageindex="+this.pageindex
				})
				console.log("res#QgetHotWorks:" + res);
				this.works = res.data.data.list;
				callBack && callBack();
			},
			async navItemClick(index){
				let url =  "/works/getAllWorksList?orderStr=zh&pageindex=1";
				if(index == '1'){
					url = "/works/getAllWorksList?orderStr=zh&pageindex=1";
				}else if(index == '2'){
					url = "/works/getLikeWorksList?orderStr=like&pageindex=1";
				}else if(index == '3'){
					url = "/works/getBrowseWorksList?orderStr=browse&pageindex=1";
				}
				const res = await this.$myRequest({
					url:url
				})
				console.log("res#QgetHotWorks:" + res);
				this.works = res.data.data.list;
			}
		},
		
		onLoad(){
			this.getWorkList();
		},
		onReachBottom(){
			console.log("rea bottom")
			//TODO 此处要实现分页功能按页返回数据
			//判断是否还有数据，有数据就发请求，没有就显示没有数据
			this.flag=true;//没有数据的标志
			this.pageindex++;
			this.getWorkList();
		},
		onPullDownRefresh(){
			this.pageindex = 1;
			this.works = [];
			this.flag = false;
			setTimeout(()=>{
				this.getWorkList(()=>{
					uni.stopPullDownRefresh();
				});
			},500)
		}
	}
</script>

<style lang="scss">
	.works_list{
		background: #eee;
		.sort_type{
			display: flex;
			justify-content: space-around;
			position: fixed;
			z-index: 100;
			background: #ffffff;
			width: 100%;
			padding: 25rpx;
		}
	}
	.isOver{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
	}
	.sort_type{
		display: flex;
		justify-content: space-between;
		view{
			width: 100%;
			height: 100%;
			text-align: center;
		}
		view:nth-child(1){
			border-right: 1px solid #969896;
		}
		view:nth-child(2){
			border-right: 1px solid #969896;
		}
	}
</style>
